/*
  学习目标：数据存入redux中, 渲染列表
  步骤：

*/
import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { getNewsByIdAction } from "../store/action/news";
import defaultImg from "../assets/defaultCover.jpg";

export default function News() {
  const { id } = useSelector((state) => state.channel);
  // 4. 取出数据列表渲染
  const { newsList } = useSelector((state) => state.news);

  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(getNewsByIdAction(id));
  }, [dispatch, id]);

  return (
    <div className="list">
      {newsList.map((item) => {
        return (
          <div className="article_item">
            <h3 className="van-ellipsis">{item.title}</h3>
            <div className="img_box">
              <img
                src={item.cover.images ? item.cover.images[0] : defaultImg}
                className="w100"
                alt=""
              />
            </div>
            <div className="info_box">
              <span>{item.aut_name}</span>
              <span>{item.comm_count}评论</span>
              <span>{item.pubdate}</span>
            </div>
          </div>
        );
      })}
    </div>
  );
}
